<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>

</head>
<body>

<div id="app">
    <div style="width: 400px; margin: 100px auto">
        <div style="font-size: 30px; text-align: center; padding: 30px 0; ">欢迎登录</div>
        <el-form :model="form" :rules="rules" ref="form" width="100px" class="demo-ruleForm">
            <el-form-item prop="userName">
                <el-input placeholder="请输入账号" prefix-icon="el-icon-s-custom"
                          v-model="form.userName"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input placeholder="请输入密码" type="password" prefix-icon="el-icon-lock" v-model="form.password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button style="width: 100%" type="success" @click="login">登 录</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>


<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    userName: '',
                    password: '',
                },
                rules: {
                    userName: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
                    password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
                },
                validCode:''

            }
        },
        methods: {
            login() {
                axios.get('/sysuser/login?'+'userName='+this.form.userName+'&'+'password='+this.form.password).then(res => {
                    console.log(res)
                    if (res.data.data!=null) {
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        sessionStorage.setItem("userInfo", JSON.stringify(res.data))
                      /*  const userData = JSON.parse(sessionStorage.getItem("userInfo"));
                        console.log(userData)
                        this.userId=userData.data.userId*/
                        location.href = "/html/home.html";
                    }
                    else {
                        this.$message.error("用户名或密码错误");
                    }

                })
            }
        }
    })

</script>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .el-input {
        margin-bottom: 20px;
    }
    a {
        text-decoration: none;
        color: #a0cfff;

    }

    body {
        background: url("/img/dlbj.jpg") no-repeat;
        background-size: 100% 150%;
    }


</style>
</html>

